<template>
  <div class="signalBox" >
    <div class="signalBk"></div>
    <div class="signalImg">
      <img class="masterImg" :src="hint" alt="">
      <img class="masterClose" :src="closeImg" alt="" @click="actionAuto">
    </div>
  </div>
</template>
<style lang="scss" rel="stylesheet/scss" scoped>
  .signalBox{
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    background:transparent;
    z-index:9999999;
    .signalBk{
      width:100%;
      height:100%;
      position: absolute;
      top:0;left:0;
      opacity:0.5;
      background:$color-black;
    }
    .signalImg{
      width:100%;
      position: absolute;
      top:50%;left:50%;
      transform: translate(-50%,-50%);
      .masterImg{
        width:5.7rem;
      }
    }
    .masterClose{
      width:0.55rem;
      position: absolute;
      top:0;right:1rem;
    }
  }
</style>
<script>
  export default{
    name:'',
    data(){
      return {
        hint:require('../assets/icons/widget/hint.png'),
        closeImg:require('../assets/icons/widget/closeActivity.png')
      };
    },
    props:{
      okCallback: {
        type: Function,
        default: null
      }
    },
    methods:{
      actionAuto: function () {
        if (this.okCallback) {
          this.okCallback();
        } else {
          this.$store.commit('activityAlert', {show: false});
        }
        document.querySelector('body').style.overflow = 'auto';
        document.querySelector('body').style.height = 'none';
      }
    },
    mounted:function(){
      document.querySelector('body').style.overflow = 'hidden';
      document.querySelector('body').style.height = '100%';
      document.querySelector('html').style.overflow = 'hidden';
      document.querySelector('html').style.height = '100%';
    }
  }
</script>
